<template>
  <div>
    <div v-show="chatShow" style="width: 420px;height: 600px;position: fixed;right:20px;bottom:0px;z-index: 999">
      <div style="position: absolute">
        <div style="position: absolute">
          <avue-chat ref="chat" :keylist="keylist" @keysend="handleSubmit" @keyadd="handleAdd" :config="config" width="420" height="560" @submit="handleSubmit" v-model="msg" :list="list">
          </avue-chat>
        </div>
        <div style="position: absolute;width:420px;height:40px">
          <el-tag @click="chatShow=false" style="margin-left:350px;margin-top: 15px;background: #ffffff"  type="text">关闭</el-tag>
        </div>
      </div>

    </div>

    <el-row>
      <el-col :span="7">
        <basic-container>
            <avue-form ref="form" v-model="shopData" :option="option" @submit="submit">
            </avue-form>
        </basic-container>
      </el-col>
      <el-col :span="17">
        <basic-container>
          <avue-data-tabs :option="tabsOption"></avue-data-tabs>
          <el-divider></el-divider>
          <avue-data-progress :option="progressOption"></avue-data-progress>
        </basic-container>
      </el-col>
      <el-col :span="17">
        <basic-container>
          <avue-card :option="cardOption" :data="cardData" @row-click="tip" @row-add="tip">
          </avue-card>
        </basic-container>
      </el-col>



    </el-row>

    <el-dialog
      title="添加银行卡"
      :visible.sync="addCardShow"
      width="30%"
      :before-close="handleClose">
      <el-form :label-position="'right'" label-width="80px" :model="addCardForm">
        <el-form-item label="姓名"  style="width: 90%">
          <el-input v-model="addCardForm.bankName" disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="卡号"  style="width: 90%">
          <el-input v-model="addCardForm.bankCard"></el-input>
        </el-form-item>
        <el-form-item label="手机号"  style="width: 90%">
          <el-input v-model="addCardForm.bankPhone">
            <template slot="append"><el-button type="text">获取验证码 </el-button></template>
          </el-input>


        </el-form-item>
        <el-form-item label="验证码" style="width: 90%">
          <el-input v-model="addCardForm.code"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
    <el-button @click="">取 消</el-button>
    <el-button type="primary" @click="addCardSubmit">确 定</el-button>
  </span>
    </el-dialog>


    <el-drawer

      title="钱包"
      size="40%"
      :visible.sync="walletShow"
      :direction="'rtl'"
    >
      <div style="background:rgb(240, 242, 245) ;height: 100vh;padding-top:10px ">
        <el-card  style="margin-left:2%;width: 96%;margin-top: 0px">
          <avue-data-tabs :option="walletOption"></avue-data-tabs>
        </el-card>

        <el-card   style="margin-top: 20px;width: 96%;margin-left:2%;">
          <el-tabs v-model="walletTabs" @tab-click="handleTabsClick">
            <el-tab-pane label="提现" name=0>
              <avue-form ref="withdrawForm" v-model="withdrawData" :option="withdrawOption" @submit="withdrawSubmit">
              </avue-form>

            </el-tab-pane>
            <el-tab-pane label="充值" name=1>
              <avue-form ref="rechargeForm" v-model="rechargeData" :option="rechargeOption" @submit="rechargeSubmit">
              </avue-form>

            </el-tab-pane>
            <el-tab-pane label="银行卡管理" name=2>
              <el-button @click="showAddCardBox">添加新卡</el-button>
              <el-divider></el-divider>
              <avue-card :option="bankcardOption" :data="bankcardData" @row-click="tip" @row-add="tip">
                <template slot="menu" slot-scope="scope">
                  <span @click.stop="tip(scope.row,scope.index)">删除</span>
                </template>
              </avue-card>

            </el-tab-pane>
            <el-tab-pane label="支付管理" name=3>
              <el-row>
                <basic-container>
                  <div class="el-font-size">
                    <span>实名信息</span>
                    <el-divider direction="vertical"/>
                    <span><el-tag effect="plain">清除实名</el-tag></span>
                    <el-divider content-position="right"><i class="el-icon-star-off"/></el-divider>
                    <span>支付密码</span>
                    <el-divider direction="vertical"/>
                    <el-tag effect="plain">重置</el-tag>
                    <el-divider content-position="right"><i class="el-icon-star-off"/></el-divider>
                    <span>商家社区</span>
                    <el-divider direction="vertical"/>
                    <span><el-link href="https://ocm.shop.com" target="_blank"
                                   type="primary">https://ocm.shop.com</el-link></span>
                    <el-divider content-position="right"><i class="el-icon-star-off"/></el-divider>

                  </div>
                </basic-container>
              </el-row>

            </el-tab-pane>
          </el-tabs>
        </el-card>

      </div>

    </el-drawer>
  </div>
</template>

<script>
  import { updateByUser,  getOne} from "@/api/shop/shop";
  import {_bankTypeImage,_cardTypeMap,_bankTypeMap} from "@/const/wallet/bankCardType"
  import { getWallet,getCertification,getCardType,addBankCard,bankCardList,withdraw,recharge} from "@/api/shop/wallet";
  import {mapGetters} from "vuex";

  export default {
    data() {
      return {
        //功能区
        chatShow:false,
        //钱包功能-银行卡管理
        //添加银行卡
        addCardForm:{
          bankName:'',
          bankCard:'',
          code:'',
          bankPhone:''
        },
        addCardShow:false,
        //银行卡信息
        bankcardOption: {
          addBtn:false,
          span:12,
          props: {
            img: 'img',
            title: 'title',
            info: 'text',
          }
        },
        bankCardList:[],
        bankcardData: [],
        //钱包功能-充值
        rechargeData:{},
        rechargeOption:{
          column: [
            {
              type: 'input',
              labelWidth:130,
              label: '金额',
              span: 24,
              display: true,
              prop: 'rechargeAmount',
              required: true,
              rules: [
                {
                  required: true,
                  message: '请输入金额'
                }
              ]
            },
            {
              type: 'select',
              label: '充值方式',
              labelWidth:130,
              prop: "cardData",
              props: {
                label: "select",
                value: "data"
              },
              dicData:[],
              span: 24,
              display: true,
              required: true,
              rules: [
                {
                  required: true,
                  message: '请选择充值方式'
                }
              ]
            },
            {
              type: 'input',
              labelWidth:130,
              label: '支付密码',
              span: 24,
              display: true,
              prop: 'payPassword',
              required: true,
              rules: [
                {
                  required: true,
                  message: '请输入支付密码'
                }
              ]
            },
          ]},
        //钱包功能-提现
        withdrawData:{},
        withdrawOption:{
          column: [
            {
              type: 'input',
              labelWidth:130,
              label: '金额',
              span: 24,
              display: true,
              prop: 'withdrawAmount',
              required: true,
              rules: [
                {
                  required: true,
                  message: '请输入金额'
                }
              ]
            },
            {
              type: 'select',
              label: '到账银行卡',
              labelWidth:130,
              prop: "cardData",
              props: {
                label: "select",
                value: "data"
              },
              dicData:[],
              span: 24,
              display: true,
              required: true,
              rules: [
                {
                  required: true,
                  message: '请选择到账银行卡'
                }
              ]
            },
            {
              type: 'input',
              labelWidth:130,
              label: '支付密码',
              span: 24,
              display: true,
              prop: 'payPassword',
              required: true,
              rules: [
                {
                  required: true,
                  message: '请输入支付密码'
                }
              ]
            },
        ]},
        //钱包功能
        walletTabs:0,
        walletOption: {
          data: [
            {

              title: '余额',
              subtitle: '48小时内',
              count: 0,
              allcount: 0,
              text: '今日盈利',
              color: 'rgb(63,149,253)',
              key: 'O'
            },
            {

              title: '冻结',
              subtitle: '卖家收货后到账',
              count: 0,
              allcount: 0,
              text: '今日盈利',
              color: 'rgb(230,71,88)',
              key: 'C'
            },
            {
              title: '支出',
              subtitle: '累计',
              count: 0,
              allcount: 0,
              text: '今日支出',
              color: 'rgb(255,144,46)',
              key: 'M'
            }
          ]
        },
        cardOption: {    excelBtn:true,
          addBtn:false,
          props: {
            img: 'img',
            title: 'title',
            info: 'text',
          }
        },
        cardData: [{
          title: '钱包',
          text: '您可以在此提现,充值,查看余额,查看即将到帐的金额,流量高峰期此数据可能出现短暂延迟.',
          img: 'https://iconfont.alicdn.com/t/7ccae7b1-999b-4dfe-a0cb-706c8a347cbf.png'
        }, {
          title: '智能客服',
          text: '您可以在此呼叫人工客服',
          img: 'https://img2.baidu.com/it/u=3208093179,1646673830&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=501'
        }, {
          title: '测试数据',
          text: '一点商城是最好看的商城',
          img: 'https://gw.alipayobjects.com/zos/rmsportal/dURIMkkrRFpPgTuzkwnB.png'
        }, {
          title: '测试数据',
          text: '一点商城是最棒的商城',
          img: 'https://gw.alipayobjects.com/zos/rmsportal/sfjbOqnsXXJgNCjCzDBL.png'
        }, {
          title: 'Bootstrap',
          text: '在中台产品的研发过程中，会出现不同的设计规范和实现方式，但其中往往存在很多类似的页面和组件，这些类似的,在中台产品的研发过程中，会出现不同的设计规范和实现方式，但其中往往存在很多类似的页面和组件，这些类似的',
          img: 'https://gw.alipayobjects.com/zos/rmsportal/siCrBXXhmvTQGWPNLBow.png'
        }],
        //
        walletShow:false,
        shopData:{},
        option:{
          column: [
            {
              type: 'input',
              label: '店铺名',
              span: 24,
              display: true,
              prop: 'shopName',
            },
            {
              type: 'upload',
              label: '头像',
              span: 24,
              display: true,
              listType: 'picture-img',
              propsHttp: {
                res: 'data',
                url: 'link',
              },

              action: '/api/ocm-resource/oss/endpoint/put-file',
              tip: '只能上传jpg/png用户头像，且不超过500kb',
              row: true,
              prop: 'shopAvatar',
              required: true,
              rules: [
                {
                  required: true,
                  message: '请输入头像'
                }
              ]
            },
            {
              type: 'textarea',
              label: '店铺描述',
              span: 24,
              display: true,
              prop: 'shopDescribe',
              required: false,
              rules: []
            }, {
              type: 'textarea',
              label: '默认地址',
              span: 24,
              display: true,
              prop: 'shopAddress',
              required: false,
              rules: []
            },
            {
              type: 'select',
              label: '店铺类型',
              prop: "shopType",
              props: {
                label: "dictValue",
                value: "dictKey"
              },
              dicUrl: "/api/ocm-system/dict/dictionary?code=shop_type",
              span: 24,
              display: true,
              disabled: true,
              required: true,
              rules: [
                {
                  required: true,
                  message: '请选择店铺类型'
                }
              ]
            },
            {
              type: 'input',
              label: '经营范围',
              span: 24,
              display: true,
              prop: 'shopScope'
            },
            {
              type: 'input',
              label: '品牌',
              span: 24,
              display: true,
              prop: 'shopBrand',
              required: true,
              rules: [
                {
                  required: true,
                  message: '品牌必须填写'
                }
              ]
            },
            {
              type: 'input',
              label: '创建时间',
              span: 24,
              display: true,
              disabled: true,
              prop: 'createTime',
              rules: [
                {
                  required: true,
                  message: '创建时间必须填写'
                }
              ],
              readonly: true,
              required: true
            }
          ],
          labelPosition: 'left',
          labelSuffix: '：',
          labelWidth: 120,
          gutter: 0,
          menuBtn: true,
          submitBtn: true,
          submitText: '提交',
          emptyBtn: true,
          emptyText: '清空',
          menuPosition: 'center'
        },
        tabsOption: {    excelBtn:true,
          data: [
            {
              click: function (item) {
                alert(JSON.stringify(item));
              },
              title: '订单总数',
              subtitle: '实时',
              count: 7993,
              allcount: 10222,
              text: '当前分类总记录数',
              color: 'rgb(27, 201, 142)',
              key: '日'
            },
            {
              click: function (item) {
                alert(JSON.stringify(item));
              },
              title: '附件统计',
              subtitle: '实时',
              count: 125,
              allcount: 1550,
              text: '当前上传的附件数',
              color: 'rgb(230, 71, 88)',
              key: '附'
            },
            {
              click: function (item) {
                alert(JSON.stringify(item));
              },
              title: '访问统计',
              subtitle: '实时',
              count: 908,
              allcount: 10222,
              text: '总登录次数',
              color: 'rgb(178, 159, 255)',
              key: '评'
            }
          ]
        },
        progressOption: {    excelBtn:true,
          span:6,
          data: [
            {
              click: function (item) {
                alert(JSON.stringify(item));
              },
              title: '转化率（日同比 28%）',
              color: 'rgb(178, 159, 255)',
              count: 32,
              href:'https://avuejs.com',
              target:'_blank'
            },
            {
              click: function (item) {
                alert(JSON.stringify(item));
              },
              title: '签到率（日同比 11%）',
              color:'rgb(230, 71, 88)',
              count: 32,
              href:'https://avuejs.com',
              target:'_blank'
            },
            {
              click: function (item) {
                alert(JSON.stringify(item));
              },
              title: 'CPU使用率',
              color:'rgb(27, 201, 142)',
              count: 56,
              href:'https://avuejs.com',
              target:'_blank'
            },
            {
              click: function (item) {
                alert(JSON.stringify(item));
              },
              title: '使用人数',
              color:'red',
              count: 56,
              href:'https://avuejs.com',
              target:'_blank'
            }
          ]
        },
        config: {
          img: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2F2021%2Fedpic_source%2F2e%2Fde%2Ff6%2F2edef6f10e55758df58f86b8956d9b01_15.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1646837125&t=bdb13255fdd1378bd02bae2f3e35ff43',
          name: 'OCM智能客服',
          dept: '很高兴和您沟通~'
        },
        keylist: [
          '您好，欢迎光临***品牌旗舰店，很高兴为您服务！/:^_^',
          '您好，/:^_^不好意思让您久等了，您看中这款是吗（截图发给客户看），要什么颜色的呢？',
          '亲，这款是打特价的价格呢，已经是最低价了哦，现在全场三件（根据具体情况而定）包邮哦，您挑多一件了',
          '您好，欢迎光临***品牌旗舰店，很高兴为您服务！/:^_^',
          '您好，/:^_^不好意思让您久等了，您看中这款是吗（截图发给客户看），要什么颜色的呢？',
          '亲，这款是打特价的价格呢，已经是最低价了哦，现在全场三件（根据具体情况而定）包邮哦，您挑多一件了'
        ],
        msg: '这是你想说的话～。～',
        list: [

        ]
       }
    },
    created() {
      this.handleWitch();
    },
    computed: {
      ...mapGetters(["permission"]),
      permissionList() {
        return {
        };
      }
    },
    methods: {
      handleAdd(msg) {
        this.keylist.push(msg);
        this.$message.success('快捷回复语添加成功')
      },
      handleSubmit(msg) {
        this.msg = msg || this.msg

        this.$refs.chat.pushMsg({
          mine: true,
          text: this.msg
        });
        this.$refs.chat.rootSendMsg(this.getMsg(this.msg));
        console.log(this.$refs.chat)
        this.msg = '';
      },
      //智能题库
      getMsg(msg) {
        msg = msg.replace(/[\r\n]/g,"").replace(/ +/g,"");
        if (msg === '你好') {
          return {
            text: '您好，我是OCM智能客服,有什么可以帮到您',
            list: [{
              text: "如何上架商品？",
              ask: '如何上架商品'
            }]
          };
        } else if (msg === '如何上架商品') {
          return {
            text: `如何上架商品
            ${this.$refs.chat.getDetail({
              type:'video',
              src:'https://www.w3school.com.cn/i/movie.ogg'
            })}`,
            list: [{
              text: "还是不明白？人工客服",
              ask: '人工客服'
            }]
          }
        } else if (msg === '微信沟通') {
          return '可关注OCM微信公众号，进行更多了解。'
        } else if (msg === '客服电话') {
          return '可拨打24小时热线96668或********'
        } else if (msg === '到网点申请') {
          return '可就近选择网点，附网点列表及联系人'
        }
        return {
          text: '您说的我暂时还听不懂哦'
        }
      },
      rechargeSubmit(form,done){
        let card=JSON.parse(form.cardData);
        recharge({
          cardId:card.id,
          bankCard:card.bankCard,
          bankType:card.bankType,
          cardType:card.cardType,
          rechargeAmount:form.rechargeAmount,
          payPassword:form.payPassword
        }).then(res=>{
          this.$refs.rechargeForm.resetForm()
          this.$message.success("充值成功");
          this.walletOption.data[0].count+=Number(form.rechargeAmount)
          done()
        },error => {
          done()
        })
      },
      withdrawSubmit(form,done){
        let card=JSON.parse(form.cardData);
        withdraw({
          cardId:card.id,
          bankCard:card.bankCard,
          bankType:card.bankType,
          cardType:card.cardType,
          withdrawAmount:form.withdrawAmount,
          payPassword:form.payPassword
        }).then(res=>{
          this.walletOption.data[0].count-=Number(form.withdrawAmount)
          this.$refs.rechargeForm.resetForm()
          this.$message.success("提现成功,两小时内到账,具体进度查看账单");
          done()
        },error => {
          done()
        })
      },
      handleTabsClick(index){
      },
      addCardSubmit(){
        getCardType(this.addCardForm.bankCard,true).then(res=>{
          if(!res.data.validated){
            this.$message.error('银行卡号无效');
            return
          }
          this.addCardForm.bankType=res.data.bank
          this.addCardForm.cardType=res.data.cardType
          this.addCardForm.tenantId='000001'
          addBankCard(this.addCardForm).then(res=>{
            this.$message.success('绑定成功');
            this.addCardShow=false
          })

        })
      },
      showAddCardBox(){
        if(this.addCardForm.bankName===''){
          getCertification().then(res=>{
            this.addCardForm.bankName=res.data.data.codeName
          })
        }
        this.addCardShow=true
      },
      tip(row, index) {
        switch (index) {
            case 1:{

              this.chatShow=true

              return
            }
            case 0:{
              this.walletShow=true
              getWallet().then(res=>{
                this.walletOption.data[0].count=res.data.data.balance
                this.walletOption.data[1].count=res.data.data.freeze
              })
              bankCardList().then(res=>{
                this.bankcardData.splice(0,this.bankcardData.length);
                res.data.data.forEach(t=>{

                  this.bankcardData.push({
                    title:_bankTypeMap.get(t.bankType)+'('+_cardTypeMap.get(t.cardType)+')',
                    text:'**** **** **** '+t.bankCard,
                    img:_bankTypeImage.get(t.bankType),
                    select:_bankTypeMap.get(t.bankType)+'('+t.bankCard+')',
                    data:JSON.stringify(t),
                  })
                })
                this.withdrawOption.column[1].dicData= this.bankcardData
                this.rechargeOption.column[1].dicData= this.bankcardData.concat([
                  {select:'支付宝',data:JSON.stringify( {bankType:'ZFB'})},
                  {select:'微信',data:JSON.stringify({bankType:'WX'}),}
                ])
              })
            }

        }
      },
      handleWitch(){
        getOne().then(res=>{
          this.shopData=res.data.data
          this.config.myImg=res.data.data.shopAvatar
        })
      },
      submit(shopData,done){
        updateByUser(shopData).then(() => {
          this.handleWitch();
          this.$message({
            type: "success",
            message: "操作成功!"
          });
          done()
        }, error => {
          window.console.log(error);
        });

      }
    }
  };
</script>

<style>
</style>
